<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX API family (Feeds, Search, Maps)</title>
    <style type="text/css">* { font-size: 12px; } .box { padding: 5px; border: 1px solid #ccc; } </style>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA2SGB7kYAwJ7vNIiGUvsYgBQBbqWMXPd7ku0BIuG8sIWAUrc4NRSFo9YNTIVrCt2PqV-iwm2ShFyasQ"></script>
    <script type="text/javascript">
    // Google Feed API
    google.load('feeds', '1');
    function feeds_init() {
      var feed = new google.feeds.Feed('http://b.hatena.ne.jp/hotentry?mode=rss');
      feed.setNumEntries(10);
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          var text = '';
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            text += '<li><a href="' + entry.link + '">' + entry.title + '</a></li>';

          }
          container.innerHTML = '<ul>' + text + '</ul>';
        }
      });
    }
    google.setOnLoadCallback(feeds_init);

    google.load('search', '1.0');
    function search_init() {
      var searchControl = new GSearchControl();
      searchControl.addSearcher(new GwebSearch());
      searchControl.draw(document.getElementById("searchcontrol"));
    }
    google.setOnLoadCallback(search_init);

    google.load('maps', '2');
    function maps_init() {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(35.658586, 139.745450), 16);
    }
    google.setOnLoadCallback(maps_init);
    </script>
  </head>
  <body>
    <h2>Feed API</h2>
    <div class="box" id="feed"></div>

    <h2>Search API</h2>
    <div class="box" id="searchcontrol"></div>

    <h2>Maps API</h2>
    <div class="box" id="map" style="width: 400px; height: 300px;"></div>
  </body>
</html>
